<template>
  <div>

    <div style="height: 500px;display: flex;padding-left: 10%;padding-right: 10%;">
      <img :src="orderData.bookPicture"
           style="width: 260px;height: 380px;margin-top: auto;margin-bottom: auto;margin-left: 5%">
      <div style="margin-left: 3%;display: flex;margin-top: auto;margin-bottom: auto;width: 80%">
        <div style="color: black;font-size: 20px;">
          <span>书名： {{ orderData.bookName }}</span><br><br>
          <span>作者： {{ orderData.author }}</span><br><br>
          <span>单价： ￥{{ orderData.price }}</span><br><br>
          <span>购买数量： {{ orderData.quantity }} 件</span><br><br>
          <span>总计： ￥{{ orderData.total }}</span><br><br>
          <span>订单编号： {{ orderData.serial }}</span><br><br>
        </div>
        <div style="margin-left: 10%;">
          <el-timeline>
            <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :hollow="activity.hollow"
                :timestamp="activity.timestamp"
            >
              <div v-if="index !== 4">
                {{ activity.content }}
              </div>
              <div v-if="index === 4">
                <el-popover width="260" placement="right">
                  <template #reference>
                    {{ activity.content }}
                  </template>
                  <template #default>
                    <div style="width: 300px">
                      <div>
                        你确认收已收货吗？确认后不可退款！
                      </div>
                      <div>
                        <el-button @click="confirmHuo" text type="primary">确认</el-button>
                      </div>
                    </div>
                  </template>
                </el-popover>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { MoreFilled } from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {useRoute} from "vue-router";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import Body from "../Frame/Body.vue";
const activities = ref([
  {
    content: '创建订单',
    timestamp: '2018-04-03 20:46',
    hollow: true,
  },
  {
    content: '支付完成',
    timestamp: '',
  },
  {
    content: '商家发货',
    timestamp: '',
  },
  {
    content: '买家签收',
    timestamp: '',
  },
  {
    content: '买家确认',
    timestamp: '',
    size: 'large'
  },
  {
    content: '订单完成',
    timestamp: '',
    size: "large"
  },
])

const confirmHuo = ()=>{
  axios.post("/order/confirm/" + orderData.orderId).then(()=>{

  }).catch(error => {
    ElMessage.error(error)
  })
}


let orderData = reactive({
  orderId: useRoute().query.id,
  bookName: '我是鲁滨逊',
  bookPicture: '',
  author: "鲁滨逊",
  price: 33.8,
  quantity: 1,
  total: 1,
  orderRef: 213123123123,
  orderStateList: []
})

const getOrderData = ()=>{
  axios.get('/order/detail/'+ useRoute().query.id).then(res => {
    let temp = res.data.data;
    console.log("接收到的 ");
    console.log(temp);
    orderData.orderId=temp.orderId
    orderData.bookName=temp.bookName
    orderData.bookPicture=temp.bookPicture
    orderData.author=temp.author
    orderData.price=temp.price
    orderData.quantity=temp.quantity
    orderData.total=temp.total
    orderData.serial=temp.serial
    orderData.orderStateList=temp.orderStateList
    for (let k=0; k < temp.orderStateList.length; k++) {
      //icon: MoreFilled,
      activities.value[k].timestamp = temp.orderStateList[k];
      if ( k !== temp.orderStateList.length-1){
        activities.value[k].color = '#72ad72';
      }
    }
    activities.value[temp.orderStateList.length-1].icon = MoreFilled;
    activities.value[temp.orderStateList.length-1].type = "primary";
  }).catch(error => {
    ElMessage.error(error)
  })
}
getOrderData()

</script>

<style scoped>
</style>
